<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
     
    </style>
  </head>
  <body>


    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>

      function arrows(context){
        context.moveTo(0,0);
        context.lineTo(10,0);
        context.lineTo(10,-5);
        context.lineTo(20,3);
        context.lineTo(10,11);
        context.lineTo(10,6)
        context.lineTo(0,6);
        context.closePath()
      }


      const width = 800 ;
      const height = 600 ;
      /*
      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .style("border", "1px solid #ccc");

      const context = d3.path();

      arrows(context);

      svg.append('g').attr('transform','translate(400,300)')
        .append('path')
        .attr('d',context.toString())
        .attr('fill','none')
        .attr('stroke','#666')  
      */
     
      const canvas = document.createElement('canvas')
      canvas.width = width ;
      canvas.height = height ;
      canvas.style.border = '2px solid #00f';
      document.body.append(canvas);

      const context = canvas.getContext('2d');
      context.save();
      context.translate(400,300)
      context.beginPath();
      context.strokeStyle = '#fac' ;
      context.lineWidth = 10 ;
      context.fillStyle = '#acf' ;
      //arrows(context) ;
      const arc = d3.arc() 
          .innerRadius(100)
          .outerRadius(200)
          .padAngle(0.1)
          .cornerRadius(10)
      arc.context(context);
      let d = arc({
          startAngle:0,
          endAngle:Math.PI/2,
      })
      
      context.stroke();
      context.fill()

    </script>
  </body>
</html>
